<template>
  <div>
    <div class="allExpert-page">
      <expert-source
        :cgoods="goods"
        @handleSearch="handleSearch"
      ></expert-source>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="pageClick"
        :current-page="currentPage"
        :page-count="pageSize"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";

import ExpertSource from "../components/ExpertSource.vue";
import { useRouter } from "vue-router";
import { selectExperts } from "../api/expert";

const goods = ref([]);
const total = ref(0);
const pageSize = ref(30);
const searchValue = ref("");
const currentPage = ref(1);
const goodsCount = ref(1);
const router = useRouter();

const getData = () => {
  selectExperts({
    pageNum: currentPage.value,
  }).then((res) => {
    if (res.code === 0) {
      goods.value = res.data.records;
      total.value = res.data.total;
      currentPage.value = res.data.current;
      pageSize.value = res.data.pages;
      
    } else {
      // handle error or display message
      ElMessage.error(res.message);
    }
  });
};

const pageClick = (newPage) => {
  goodsCount.value = newPage;
  getData();
};

const handleSearch = (val) => {
  searchValue.value = val;
  goodsCount.value = 1; // reset to first page when search
  getData();
};

onMounted(() => {
  getData();
});
</script>

<style lang="less" scoped>
.allExpert-page {
  width: 1300px;
  margin: 0 auto;
}
</style>